<template>
    <div class="giftbagResizePage">
        <div class="title">用户礼包数调整：</div>
        <el-form :model="giveSangiftDTO"  size="medium" ref="form" label-width="120px" :rules="commonRules" >
            <el-form-item label="用户:" prop="mobile" :rules="commonRules.notNullRule">
                <el-input v-model="giveSangiftDTO.mobile" placeholder="输入用户手机号码"></el-input>
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item class="aaa">
                <el-table size="mini"  :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                    <el-table-column align="center" label="用户昵称" prop="nickname"></el-table-column>
                    <el-table-column align="center" label="用户身份">
                        <template slot-scope="scope">
                            <span v-if="scope.row.role===0||scope.row.role===1">普通会员</span>
                            <span v-if="scope.row.role===2">大区</span>
                            <span v-if="scope.row.role===3">董事</span>
                        </template> 
                    </el-table-column>
                    <el-table-column align="center" label="用户LV">
                        <template slot-scope="scope">
                            <span>LV{{scope.row.level}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户礼包数" prop="sangiftCount"></el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="增加礼包数:" prop="number" v-if="list.length>0" :rules="commonRules.numberRule">
                <el-input v-model="giveSangiftDTO.number" placeholder="输入礼包数量"></el-input>
            </el-form-item>
            <el-form-item label="说明:" prop="memo" v-if="list.length>0" :rules="commonRules.notNullRule">
                <el-input v-model="giveSangiftDTO.memo" placeholder="输入说明，最多20个字" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item v-if="list.length>0">
                <el-button class="filter-item" type="primary" @click="giftbagResize">调整</el-button>
            </el-form-item>
        </el-form>   
        <el-dialog title="调整后用户礼包信息" :visible.sync="showPop">
            <el-table size="mini"  :data="listTwo"  header-row-class-name="table-header"  border highlight-current-row>
                <el-table-column align="center" label="用户昵称" prop="nickname"></el-table-column>
                <!-- <el-table-column align="center" label="用户身份">
                    <template slot-scope="scope">
                        <span v-if="scope.row.role===0||scope.row.role===1">普通会员</span>
                        <span v-if="scope.row.role===2">大区</span>
                        <span v-if="scope.row.role===3">董事</span>
                    </template> 
                </el-table-column>
                <el-table-column align="center" label="用户LV">
                    <template slot-scope="scope">
                            <span>LV{{scope.row.level}}</span>
                        </template>
                </el-table-column> -->
                <el-table-column align="center" label="用户礼包数" prop="sangiftCount"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showPopSure" :loading="btnLoading" :disabled="btnLoading">确定</el-button>
                <el-button @click="showPop = false">取消</el-button>
            </div>
        </el-dialog>    
    </div>
</template>

<script>
export default {
  name: 'giftbagResize',
  data() {
    return {
     giveSangiftDTO: {
        mobile:'',
        memo: '',
        number: ''
     },
     list: [],
     listTwo: [],
     listLoading: false,
     showPop: false,
     btnLoading:false
    }
  },
  methods: {
    search() {
        this.getData()
    },
    getData() {
        this.listLoading = true
        this.list = []
        this.request({
            url: '/manager/customer/v1/open/bx/user/level/by/mobile',
            method: 'get',
            params: {mobile:this.giveSangiftDTO.mobile},
            apiType: 'commission'
        }).then((res) => {
            if(res.data){
                this.list = [{...res.data}]
                this.listTwo = [{...res.data}]
            } else {
                this.list=[]
            }
            this.listLoading = false;
        }).catch(err => {
            console.log(err);
            this.list = [];
            this.listLoading = false;
        });
    },
    giftbagResize() {
        this.$refs.form.validate(valid => {
            if(valid) {
                this.listTwo[0].sangiftCount = Number(this.list[0].sangiftCount) + Number(this.giveSangiftDTO.number)
                this.showPop = true
            }   
        })
    },
    showPopSure() {
        this.btnLoading = true
        this.request({
            url: '/manager/customer/v1/open/bx/user/level/sangift/give',
            method: 'post',
            data: this.giveSangiftDTO,
            apiType: 'commission'
        }).then((res) => {
            if(res.code==='200') {
                this.showPop = false
                this.btnLoading = false
                this.$message({
                    type: 'success',
                    message: '调整成功'
                })
                this.getData()
            }
        }).catch(err => {
            this.btnLoading = false
            console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
    .giftbagResizePage{
        margin-top: 20px;
        .title{
            margin:20px ;
        }
        .aaa{
            width: 40%;
            min-width: 570px;
        }
    }
</style>
